<script setup lang="ts">
import { Discussion } from "../../index";

const props = defineProps<{ discussion: Discussion }>();
import { useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();
const url = `/discussion/${props.discussion.id}`;
const publishTime = ref(new Date(props.discussion.publishTime));
</script>

<template>
  <div class="border-opacity-50 border-b-2 py-3">
    <div class="text-2xl pb-4 text-orange-500">
      <span
        class="hover:text-blue-500 hover:cursor-pointer"
        @click="() => router.push(url)"
        >{{ discussion.title }}</span
      >
    </div>
    <div class="flex">
      <div>
        <span class="text-green-700 mx-3">{{ discussion.publishUser }}</span>
        <span class="opacity-30"
          >{{ publishTime.getFullYear() }}/{{ publishTime.getMonth() }}/{{
            publishTime.getDay()
          }}
          发表</span
        >
      </div>
      <div class="flex-grow"></div>
      <div>
        <span class="text-green-700 mx-3">{{
          discussion.latestReply.publisherName
        }}</span>
        <span class="opacity-30">最新回复</span>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
